{% extends 'base.html' %}
{% block title %}
    登录
{% endblock %}
{% block link %}
    <link rel="stylesheet" href="{{ url_for('static', filename='css/login-style.css') }}">
{% endblock %}

{% block style %}
    <style>
        .radius {
            border: 1px solid #DCDFE6;
            margin-bottom: 25px;
        }

        .btn {
            width: 100%;
        }
    </style>
{% endblock %}

{% block body %}
    <div class="content">
        <div class="content_input">
            <div class="title">
                <p>用户登录</p>
            </div>

            <form class="layui-form" action="">

                <div class="layui-form-item">
                    <input type="text" name="username" lay-verify="username" autocomplete="off" placeholder="用户名"
                           class="layui-input radius">
                </div>

                <div class="layui-form-item">
                    <input type="password" name="password" lay-verify="password" autocomplete="off" placeholder="密码"
                           class="layui-input radius">
                </div>
                <div class="content_button">
                    <button type="submit" class="layui-btn layui-btn-normal btn" lay-submit="" lay-filter="login">登录
                    </button>
                </div>


            </form>

        </div>
    </div>
{% endblock %}

{% block script %}
    <script>
        layui.use(['form', 'jquery'], function () {
            var form = layui.form,
                layer = layui.layer,
                $ = layui.jquery,
                upload = layui.upload;

            //监听提交
            form.on('submit(login)', function (data) {
                $.ajax({
                    url: '/login',
                    type: 'POST',
                    contentType: "application/json",
                    data: JSON.stringify(data.field),
                    dataType: "json",
                    withCredentials: true,
                    success: function (data) {
                        console.log(data)
                        if (data.code === 200) {
                            layer.msg("登录成功", {
                                shift: -1,
                                time: 1000
                            }, () => {
                                location.href = '/index'
                            })
                        }
                    },
                    error: function (data) {
                        layer.msg("账号或密码错误")
                    },
                })
                return false;
            });
        })
    </script>
{% endblock %}